<template>
	<div>
		<!--自定义搜索组件-->
		<basic-container>
			<el-row :span="24" :gutter="24">
				<el-col :span="4">
					<avue-input v-model="searchText" :placeholder="$t('wel.table.searchContacts')"></avue-input>
				</el-col>
				<el-col :span="3">
					<el-button type="primary" icon="el-icon-search" @click="search">{{$t("wel.table.search")}}</el-button>
				</el-col>
			</el-row>
		</basic-container>
		<basic-container>
			<avue-crud :option="option4" :data="data" :page.sync="page" @size-change="sizeChange"
				@row-update="editChange" @row-del="delChange" @current-change="currentChange"
				@search-change="searchChange">

				<!--自定义按钮-->
				<template slot-scope="scope" slot="menu">
					<el-button style="margin-left:10px;margin-top:10px;"
						class="el-button el-button--primary el-button--small" type="button" icon="el-icon-edit-outline"
						@click="editChange(scope.row,scope.index)"></el-button>
					<el-button style="margin-left:10px;margin-top:10px;"
						class="el-button el-button--primary el-button--small" type="button" icon="el-icon-s-platform"
						@click="setDevChange(scope.row,scope.index)"></el-button>
					<el-button style="margin-left:10px;margin-top:10px;"
						class="el-button el-button--primary el-button--small" type="button" icon="el-icon-user"
						@click="setUserChange(scope.row,scope.index)"></el-button>
				</template>
				<!--自定义添加-->
				<template slot="menuLeft" slot-scope="{size}">
					<el-button style="margin-left:10px;" class="el-button el-button--primary el-button--small"
						type="button" icon="el-icon-plus" @click="addStatus">{{$t("wel.table.addContacts")}}</el-button>
				</template>
			</avue-crud>
		</basic-container>
		
		<el-dialog :title="$t('wel.table.editContacts')" :visible.sync="isEdit" v-dialogdrag :class="{ 'avue-dialog': type == 0 }" width="80%">
			<avue-form :option="option" v-model="editForm" ref="form" @submit="editSubmit">
			</avue-form>
		</el-dialog>
		
		<!--添加Form-->
		<el-dialog :title="$t('wel.table.addContacts')" :visible.sync="isAdd" v-dialogdrag :class="{ 'avue-dialog': type == 0 }" width="80%">
			<avue-form :option="option" v-model="form" ref="form" @submit="settingSubmit">

			</avue-form>
		</el-dialog>

		<el-dialog :title="$t('wel.table.Associated_equipment')" :visible.sync="devSetting" v-dialogdrag :class="{ 'avue-dialog': type == 0 }"
			width="80%">
			<avue-form :option="optionDev" v-model="formDev" ref="formDev" @submit="DevSubmit">

			</avue-form>
		</el-dialog>

		<el-dialog :title="$t('wel.table.Associated_contact')" :visible.sync="userSetting" v-dialogdrag :class="{ 'avue-dialog': type == 0 }"
			width="80%">
			<avue-form :option="optionUser" v-model="formUser" ref="formUser" @submit="userSubmit">
		
			</avue-form>
		</el-dialog>


		<el-dialog :title="$t('wel.table.Delete_prompt')" :visible.sync="box" v-dialogdrag :class="{'avue-dialog':type==0}" width="90%">
			<span>{{$t('wel.table.confirm_deletion')}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="box=false">{{$t('wel.table.cancel')}}</el-button>
				<el-button type="primary" @click="delSubmit">{{$t('wel.table.determine')}}</el-button>
			</span>
		</el-dialog>
	</div>


</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';

	const dic = [];
	const user = [];
	export default {
		data() {
			return {
				editForm:[],
				formUser:[],
				userSetting:false,
				formDev: [],
				devSetting: false,
				form: [],
				isAdd: false,
				searchText: "",
				data: [],
				type: '',
				isEdit:false,
				box: false,
				page: {
					currentPage: 1,
					total: 0,
					layout: "total,pager,prev, next",
					background: false,
					pageSize: 10
				},

				delval: null,
				optionDev: {
					column: [{
						label: this.$t("wel.table.Associated_equipment"),
						prop: 'content',
						type: 'tree',
						filterText: this.$t("wel.table.Associated_equipment")+this.$t("wel.table.search"),
						multiple: true,
						dicData: dic,
						rules: [{
							required: true,
							trigger: "blur"
						}],
					}, ],
				},
				optionUser:{
					column: [{
						label: this.$t("wel.table.contacts"),
						prop: 'content',
						type: 'tree',
						filterText:  this.$t("wel.table.contacts")+ this.$t("wel.table.search"),
						multiple: true,
						dicData: user,
						rules: [{
							required: true,
							trigger: "blur"
						}],
					}, ],
				},
				option: {
					column: [{
							label: this.$t("wel.table.alarmName"),
							prop: "name",
							labelWidth:200,
							rules: [{
								required: true,
								trigger: "blur"
							}],
						},
						{
							label: this.$t("wel.table.alarmType"),
							prop: 'baud',
							type: 'tree',
							labelWidth:200,
							multiple: true,
							filterText: this.$t("wel.table.alarmType")+this.$t("wel.table.search"),
							rules: [{
								required: true,
								trigger: "blur"
							}],
							dicData: [{
									label: this.$t("wel.table.Offline_alarm"),
									value: 1
								}, {
									label:  this.$t("wel.table.Signal_strength_alarm"),
									value: 2
								},
								{
									label:  this.$t("wel.table.Flow_alarm"),
									value: '3'
								},
							],
						},


						// {
						// 	label: '联系人',
						// 	prop: 'user',
						// 	type: 'tree',
						// 	filterText: '联系人搜索',
						// 	multiple: true,
						// 	dicData: user,
						// 	rules: [{
						// 		required: true,
						// 		message: "请选择关联联系人",
						// 		trigger: "blur"
						// 	}],
						// },

						{
							label:this.$t("wel.table.modelTitle"),
							prop: 'model',
							labelWidth:200,
							type: 'tree',
							filterText: this.$t("wel.table.modelTitle")+this.$t("wel.table.search"),
							multiple: true,
							dicData: [{
									label: this.$t("wel.table.phone"),
									value: 1,
								},
								{
									label: this.$t("wel.table.email"),
									value: 2,
								},
							],
							rules: [{
								required: true,
								trigger: "blur"
							}],
						},
						{
							label: this.$t("wel.table.remarks"),
							labelWidth:200,
							prop: "remark",
						},

						{
							labelPosition: 'left',
							labelWidth:200,
							label: this.$t("wel.table.Offline_alarm")+this.$t("wel.table.settings"),
							prop: 'timeOut',
							row: true,
							minRows: 1,
							span: 8,
							display: false,
							prepend: this.$t("wel.table.Offline_time")+">=",
							append: this.$t("wel.table.minute"),
							rules: [{
								required: true,
								message: this.$t("wel.table.input") +this.$t("wel.table.Offline_time"),
								trigger: "blur"
							}],
						},

						{
							labelPosition: 'left',
							labelWidth:200,
							label: this.$t("wel.table.signal_intensity")+this.$t("wel.table.settings"),
							prop: 'signal',
							row: true,
							type: "tree",
							display: false,
							span: 8,
							prepend: this.$t("wel.table.signal_intensity")+"<=",
							append: "",
							rules: [{
								required: true,
								message: this.$t("wel.table.input") +this.$t("wel.table.signal_intensity"),
								trigger: "blur"
							}],
							dicData: [{
									label: this.$t("wel.table.signal_intensity")+"<="+this.$t("wel.table.Extremely_strong"),
									value: 1,
								},
								{
									label: this.$t("wel.table.signal_intensity")+"<="+this.$t("wel.table.strong"),
									value: 2,
								},
								{
									label: this.$t("wel.table.signal_intensity")+"<="+this.$t("wel.table.secondary"),
									value: 3,
								},
								{
									label: this.$t("wel.table.signal_intensity")+"<="+this.$t("wel.table.weak"),
									value: 4,
								},
								{
									label: this.$t("wel.table.signal_intensity")+"<="+this.$t("wel.table.Extremely_weak"),
									value: 5,
								},
							],
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},

						{

							labelPosition: 'left',
							labelWidth:200,
							minRows: 1,
							label: this.$t("wel.table.Flow_alarm")+this.$t("wel.table.settings"),
							prop: 'flow',
							display: false,
							row: true,
							span: 8,
							prepend: this.$t("wel.table.Monthly_flow")+">=",
							append: "Mb",
							rules: [{
								required: true,
								trigger: "blur"
							}],
						},

					],
				}
			};
		},
		watch: {
			'form.baud': {
				handler(val) {
					console.log(val);
					let that = this;
					if (val === undefined) {
						return;
					}
					var timeOut = that.findObject(that.option.column, 'timeOut');
					var signal = that.findObject(that.option.column, 'signal');
					var flow = that.findObject(that.option.column, 'flow');
					timeOut.display = false;
					signal.display = false;
					flow.display = false;
					val.forEach(function(item, index) {
						var text2 = that.findObject(that.option.column, 'baud')
						console.log("选中了", text2.dicData[item - 1].label);
						if (item == 1) {
							timeOut.display = true
						}
						if (item == 2) {
							signal.display = true
						}
						if (item == 3) {
							flow.display = true
						}

					})
				},
				immediate: true
			},
			'editForm.baud': {
				handler(val) {
					console.log(val);
					let that = this;
					if (val === undefined) {
						return;
					}
					var timeOut = that.findObject(that.option.column, 'timeOut');
					var signal = that.findObject(that.option.column, 'signal');
					var flow = that.findObject(that.option.column, 'flow');
					timeOut.display = false;
					signal.display = false;
					flow.display = false;
					val.forEach(function(item, index) {
						var text2 = that.findObject(that.option.column, 'baud')
						console.log("选中了", text2.dicData[item - 1].label);
						if (item == 1) {
							timeOut.display = true
						}
						if (item == 2) {
							signal.display = true
						}
						if (item == 3) {
							flow.display = true
						}
			
					})
				},
				immediate: true
			},
		},
		computed: {
			...mapGetters(["userInfo"]),
			option4() {
				this.getList({
					'page': 1,
					'pageSize': this.page.pageSize
				});
				return {

					//index: true,
					addBtn: false,
					align: 'center',
					menuAlign: 'center',
					menuType: "icon",
					editBtn:false,
					column: [{
							label: this.$t("wel.table.alarmName"),
							
							prop: "name",
						},
						{
							label: this.$t("wel.table.modelTitle"),
							prop: "model_title",
						},
						{
							label: this.$t("wel.table.alarmType"),
							prop: "baud_title",
						},

						{
							width: 500,
							label: this.$t("wel.table.remarks"),
							prop: "remark",
						},
						{
							label: this.$t("wel.table.create_time"),
							prop: "create_time",
							addDisplay: false,
							editDisplay: false,

						}

					]
				};
			}
		},
		created() {},
		methods: {
			
			/**
			 * 确定绑定联系人 - 操作
			 * @param {Object} form
			 * @param {Object} done
			 */
			userSubmit(form, done) {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/saveContactsUser',
						data: form,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error('系统错误')
						} else if (response.data.status == 1) {
							done();
							that.userSetting = false;
							that.$message.success(response.data.info);
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
				
			},
			
			setUserChange(row){
				this.formUser = row;
				this.userSetting = true;
				//清空dic
				dic.length = 0;
				
				let that = this;
				
				//获取所有报警联系人信息
				user.length = 0;
				//获取所有联系人信息
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/getAllContactsUser',
					})
					.then(function(response) {
				
						if (response.data.status == 0) {
							that.$message.error('系统错误')
						} else if (response.data.status == 1) {
							response.data.data.forEach(function(item, index) {
								user.push({
									'label': item.name,
									'value': item.id,
								})
							})
				
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
				//获取已经关联联系人信息
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/getContactsUserList',
						data:{id:row.id},
					})
					.then(function(response) {
				
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.formUser.content=response.data.data;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},
			setDevChange(row) {
				this.formDev = row;
				this.devSetting = true;
				//清空dic
				dic.length = 0;

				let that = this;

				//获取所有设备信息
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Equipment/getAllContent',
					})
					.then(function(response) {

						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							response.data.data.forEach(function(item, index) {
								var children = [];
								if (item.content !== null) {
									item.content.forEach(function(content, i) {
										children.push({
											'label': content.name,
											'value': content.id
										})
									})
								}
								dic.push({
									'label': item.name,
									'value': item.id / -1,
									'children': children
								})
							})
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
				//获取已经关联设备信息
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/getContactsDev',
						data:{id:row.id},
					})
					.then(function(response) {

						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.formDev.content=response.data.data;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},
			addStatus() {
				this.isAdd = true;
			},

			/**
			 * 修改关联设备，提交
			 * @param {Object} form
			 * @param {Object} done
			 */
			DevSubmit(form, done) {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/saveContactsDev',
						data: form,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error('系统错误')
						} else if (response.data.status == 1) {
							done();
							that.devSetting = false;
							that.$message.success(response.data.info);
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},
			settingSubmit(form, done) {
				let that = this;
				let data = form;
				//获取所有设备信息
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/saveContacts',
						data: data,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error('系统错误')
						} else if (response.data.status == 1) {
							done();
							that.isAdd = false;
							that.$message.success(response.data.info);
							that.getList({
								'page': 1,
								'pageSize': 10
							});
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},
			search() {
				this.getList({
					str: this.searchText,
					pageSize: 10,
					page: 1,
				});
			},

			searchChange(params, done) {
				if (!params) {
					this.$message.err("请输入搜索内容");
				}
				done();
				this.getList({
					'email': params['email'],
					'name': params['name'],
					'phone': params['phone'],
					'pageSize': 10,
					'page': 1
				});
			},

			sizeChange(val) {
				this.page.currentPage = 1
				this.page.pageSize = val
				this.getList()
			},

			currentChange(val) {
				this.page.currentPage = val
				this.getList({
					'page': val,
					'pageSize': this.page.pageSize
				});
			},
			delChange(val, index) {
				let that = this;
				this.box = true;
				this.delval = val;
				return;

			},

			delSubmit() {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/delContacts',
						data: that.delval
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.$message.success(response.data.info);
							that.getList({
								'page': that.page.currentPage,
								'pageSize': that.page.pageSize
							});
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
				that.box = false;
			},
			editSubmit(form, done){
				let that=this;
				console.log(form);
				done();
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/editContacts',
						data: form
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.$message.success(response.data.info);
							that.getList({
								'page': that.page.currentPage,
								'pageSize': that.page.pageSize
							});
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
				that.isEdit = false;
			},

			editChange(val, index) {
				console.log(val);
				this.isEdit=true;
				this.editForm.name=val.name;
				this.editForm.id=val.id;
				this.editForm.baud=JSON.parse(val.baud);
				this.editForm.model=JSON.parse(val.model);
				this.editForm.remark=val.remark;
				this.editForm.flow=val.flow;
				this.editForm.signal=val.signal;
				this.editForm.timeOut=val.timeOut;
			},

			getList(data) {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + 'userapi/Contacts/getContacts',
						data: data
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info)
						} else if (response.data.status == 1) {
							that.data = response.data.data.data;
							that.page.total = response.data.data.total;
							that.page.pageSize = response.data.data.per_page;
						}
					})
					.catch(function(error) {
						that.$message.error('系统错误')
					});

			}
		}
	};
</script>
